<div (click)="trackSourceClick()" class="api-doc-component" [class.deprecated]="apiDocs.deprecated">
  <h3>
    <a
      class="title-fragment"
      [routerLink]=""
      fragment="{{apiDocs.className}}"
      ngbdFragment
      title="Anchor link to: {{apiDocs.className}}"
    >
      <img src="img/link-symbol.svg" alt="Anchor link to: {{apiDocs.className}}"/>
    </a>
    <span>
      {{apiDocs.className}}<span class="text-muted font-weight-light" *ngIf="apiDocs.typeParameter">&lt;{{apiDocs.typeParameter}}&gt;</span>
    </span>
    <a
      class="github-link"
      href="https://github.com/ng-bootstrap/ng-bootstrap/tree/master/{{apiDocs.fileName}}"
      target="_blank"
      title="Link to Github: {{apiDocs.className}}"
    >
      <img src="img/github.svg" alt="Link to Github {{apiDocs.className}}"/>
    </a>
  </h3>
  <ngbd-api-docs-badge type="Configuration" [deprecated]="apiDocs.deprecated" [since]="apiDocs.since"></ngbd-api-docs-badge>
  <p *ngIf="apiDocs.deprecated">{{ apiDocs.deprecated.description }}</p>
  <p class="lead">{{apiDocs.description}}</p>

  <ng-template [ngIf]="apiDocs.properties && apiDocs.properties.length">
    <section>
      <h4>Properties</h4>
      <p class="description">
        <ng-template ngFor let-property [ngForOf]="apiDocs.properties">
          <code class="pr-2">{{ property.name }}</code>&ngsp;
        </ng-template>
      </p>
      <p class="mt-3">Documentation available in <a [routerLink]="" fragment="{{directiveName}}">{{ directiveName }}</a></p>
    </section>
  </ng-template>
</div>

